import { Link, withRouter } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import asyncRoutes from '../../router/asyncRoutes'

const BreadcrumbModel = (props: any) => {
  let { location } = props;

  const getBreadcrumb = () => {
    let matched = asyncRoutes.filter(item => item && item.title)

    const levelList = matched.filter(item => item && item.title && (item as any).breadcrumb !== false)

    return levelList
    // only show routes with meta.title
    // let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
    // const first = matched[0]

    // if (!this.isDashboard(first)) {
    //   matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
    // }

    // this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
  }

  // 面包屑：当前页面路径，文字，导航链接
  return (
    <Breadcrumb style={{ margin: '16px 16px' }}>
      {
        getBreadcrumb().map((item: any) => {
          if(item.path === location.pathname) {
            if(item.path === '/app/dashboard/index') {
              return (
                // <Breadcrumb.Item key='/app/dashboard/index'>{item.title}</Breadcrumb.Item>
                <Breadcrumb.Item key="home">Home</Breadcrumb.Item>
              )
            } else {
              return (
                [
                  <Breadcrumb.Item key="home">
                    <Link to="/">Home</Link>
                  </Breadcrumb.Item>,
                ].concat(<Breadcrumb.Item>{item.title}</Breadcrumb.Item>)
                // <>
                //   <Breadcrumb.Item key="/app/dashboard/index"><Link to={'/app/dashboard/index'}>首页</Link></Breadcrumb.Item>
                //   <Breadcrumb.Item>{item.title}</Breadcrumb.Item>
                // </>
              )
            }
          } 
          else if(item.children && item.children.length !== 0) {
            return (
              item.children.map((it: any) => {
                if(it.path === location.pathname) {
                  return (
                    [
                      <Breadcrumb.Item key="home">
                        <Link to="/">Home</Link>
                      </Breadcrumb.Item>,
                    ].concat(
                    <Breadcrumb.Item key={item.path}>{item.title}</Breadcrumb.Item>,
                    <Breadcrumb.Item key={it.path}>{it.title}</Breadcrumb.Item>)
                  )
                } else {
                  return null;
                }
              })
            )
          } else {
            return null;
          }
        })
      }
    </Breadcrumb>
  )
}

export default withRouter(BreadcrumbModel);
